<script>
/**
 * 盒子
 *  */
import {
    defineComponent,
    ref,
    getCurrentInstance,
    reactive,
    toRef,
    computed,
    onMounted,
    onActivated,
    watch,
} from 'vue';
import img from '@/assets/images/guangfu.png';

export default defineComponent({
    props: {
        dataInfo: {
            type: Array,
            default: () => {
                return[]
            },
        },
    },
    setup(props) {
        const dataContainer = reactive({
            loading: false,
            list: [
                    { types: '风力发电', day: '9', month: '11', year: '2024', icon: img },
                    { types: '光伏发电', day: '9', month: '11', year: '2024', icon: img },
                    { types: '光热发电', day: '9', month: '11', year: '2024', icon: img },
                    { types: '电化学储能发电', day: '9', month: '11', year: '2024', icon: img }
                ]
        });
        const intFunc=()=>{
        }
        
        watch(
            () => props.dataInfo,
            (newDataInfo) => {
                // console.log(newDataInfo)
                const val=JSON.parse(JSON.stringify(newDataInfo))
                dataContainer.list.forEach((v,i)=>{
                    if(Array.isArray(val[i])){
                        v.day=val[i][0]?.toFixed(2)
                        v.month=val[i][1]?.toFixed(2)
                        v.year=val[i][2]?.toFixed(2)
                    }
                })
                // intFunc()
            },
            {
                immediate: true,
                deep: true,
            },
        )

        onMounted(() => {

        });
        return {
            dataContainer,

        };
    },
});
</script>

<template>
    <div class="right_2">
        <el-table :data="dataContainer.list" stripe height="100%">
            <!-- <el-table-column label="" align="left" min-width="50" prop="">
                <template #default="scope">
                    <img style="width: 1rem;height: 1rem;" :src="scope.row.icon" alt="">
                  
                </template>
            </el-table-column> -->
            <el-table-column label="出力类别" show-overflow-tooltip align="left"  prop="types" />
            <el-table-column label="日" show-overflow-tooltip align="left" prop="day" />
            <el-table-column label="月" show-overflow-tooltip align="left" prop="month"  />

            <el-table-column label="年" show-overflow-tooltip align="left" prop="year"  />


        </el-table>
    </div>
</template>

<style lang="scss" scoped>
.right_2 {
    width: 100%;
    height: 100%;

    ::v-deep .el-table,
    ::v-deep .el-table--border {
        background-color: transparent !important;
        color: #ABDDEF;
    }

    ::v-deep .el-table .el-table__header-wrapper th {

        background-color: transparent;
        color: #ABDDEF;
    }

    ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
        background-color: #09203d !important;
    }

    ::v-deep .el-table tr,
    ::v-deep .el-table__body tr:hover>td {
        background-color: transparent !important;
    }

    ::v-deep .el-table th.el-table__cell,
    .el-table th.el-table__cell.is-leaf {

        border: none !important;
    }

    ::v-deep .el-table__inner-wrapper::before {
        background-color: rgba(0, 62, 90, 0.5);

    }

    ::v-deep .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
        border-bottom-color: #003E5A !important;
    }
}
</style>
